<template>
  <div class="checkout-address">
    <div class="text">
      <div class="none" v-if="address.length == 0">
        您需要先添加收货地址才可提交订单。
      </div>
      <ul v-else>
        <li>
          <span>收<i />货<i />人：</span
          >{{ address[defaultIdx] && address[defaultIdx].receiver }}
        </li>
        <li>
          <span>联系方式：</span
          >{{ address[defaultIdx] && address[defaultIdx].contact }}
        </li>
        <li>
          <span>收货地址：</span
          >{{ address[defaultIdx] && address[defaultIdx].address }}
        </li>
      </ul>
      <a href="javascript:;" @click="reviseDialog">修改地址</a>
    </div>
    <div class="action">
      <button class="btn" @click="changeDialog">切换地址</button>
      <button class="btn" @click="addDialog">添加地址</button>
    </div>
    <Dialog
      :dialogConfig="dialogConfig"
      :form="form"
      :idx="idx"
      @getAddress="getAddress"
      @clearForm="clearForm"
      @changeIndex="changeIndex"
      @cancel="dialogConfig.show = false"
    >
      <template v-if="dialogConfig.type == 'revise'">
        <!-- 修改地址 -->
        <div class="xtx-form">
          <div class="xtx-form-item">
            <div class="label">收货人：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入收货人"
                v-model="form.receiver"
              />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">手机号：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入手机号"
                v-model="form.contact"
              />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">地区：</div>
            <div class="field">
              <City
                placeholder="请选择所在地区"
                :obj="obj"
                @changeCity="changeCity"
              />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">详细地址：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入详细地址"
                v-model="form.address"
              />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">邮政编码：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入邮政编码"
                v-model="form.postalCode"
              />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">地址标签：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入地址标签，逗号分隔"
                v-model="form.addressTags"
              />
            </div>
          </div>
        </div>
      </template>
      <!-- 切换地址 -->
      <template v-if="dialogConfig.type == 'change'">
        <ul
          v-for="(item, index) in address"
          :key="index"
          @click="setIndex(index)"
          :class="{ active: idx == index }"
          class="list"
        >
          <li>
            <span>收<i />货<i />人：</span>{{ item.receiver }}
          </li>
          <li><span>联系方式：</span>{{ item.contact }}</li>
          <li><span>收货地址：</span>{{ item.address }}</li>
        </ul>
      </template>
      <!-- 添加地址 -->
      <template v-if="dialogConfig.type == 'add'">
        <!-- 修改地址 -->
        <div class="xtx-form">
          <div class="xtx-form-item">
            <div class="label">收货人：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入收货人"
                v-model="form.receiver"
              />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">手机号：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入手机号"
                v-model="form.contact"
              />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">地区：</div>
            <div class="field">
              <City
                placeholder="请选择所在地区"
                :obj="obj"
                @changeCity="changeCity"
              />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">详细地址：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入详细地址"
                v-model="form.address"
              />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">邮政编码：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入邮政编码"
                v-model="form.postalCode"
              />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">地址标签：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入地址标签，逗号分隔"
                v-model="form.addressTags"
              />
            </div>
          </div>
        </div>
      </template>
    </Dialog>
  </div>
</template>

<script>
// 引入dialog组件
import Dialog from "../utils/Dialog/Dialog.vue";
// 引入城市组件
import City from "../utils/City.vue";

export default {
  props: ["defaultIdx", "address"],
  components: {
    Dialog,
    City,
  },
  data() {
    return {
      //dialog配置
      dialogConfig: {
        type: "",
        show: false,
        title: "",
      },
      //控制样式的下标
      idx: 0,
      // 收货地址的默认值
      obj: {
        // 省
        provincialCode: null,
        provincialName: "北京市",
        // 市
        cityCode: null,
        cityName: "北京市",
        // 区
        countyCode: null,
        countyName: "东城区",
      },
      //修改地址的表单数据
      form: {
        // 收货人
        receiver: "",
        // 联系方式
        contact: "",
        // 所在省份编码
        provinceCode: "",
        // 所在城市编码
        cityCode: "",
        // 所在区/县编码
        countyCode: "",
        // 	详细地址
        address: "",
        // 邮政编码	邮政编码
        postalCode: "",
        // 地址标签，号分隔
        addressTags: "",
        // 	是否为默认，0为是，1为否
        isDefault: 0,
        //	完整行政区
        fullLocation: "",
      },
    };
  },
  mounted() {},
  methods: {
    // 调用收货地址接口
    getAddress() {
      this.$emit("getAddressList");
    },
    // 添加完成清空表单
    clearForm() {
      this.form = {
        // 收货人
        receiver: "",
        // 联系方式
        contact: "",
        // 所在省份编码
        provinceCode: "",
        // 所在城市编码
        cityCode: "",
        // 所在区/县编码
        countyCode: "",
        // 	详细地址
        address: "",
        // 邮政编码	邮政编码
        postalCode: "",
        // 地址标签，号分隔
        addressTags: "",
        // 	是否为默认，0为是，1为否
        isDefault: 0,
        //	完整行政区
        fullLocation: "",
      };
    },
    // 修改默认
    changeIndex(idx) {
      this.$emit("setDefaultIndex", idx);
    },
    // 点击切换地址中的数据 设置index
    setIndex(index) {
      this.idx = index;
    },
    // 修改地址内容
    changeCity(obj) {
      this.obj = obj;
      this.form.provinceCode = obj.provincialCode;
      this.form.cityCode = obj.cityCode;
      this.form.countyCode = obj.countyCode;
      this.fullLocation =
        obj.provincialName + obj.cityName + obj.countyName + "";
    },
    // 修改地址
    reviseDialog() {
      this.dialogConfig = {
        type: "revise",
        show: true,
        title: "修改收货地址",
      };
      // 返显
      this.form = { ...this.address[this.defaultIdx] };
    },
    // 切换地址
    changeDialog() {
      this.dialogConfig = {
        type: "change",
        show: true,
        title: "切换收货地址",
      };
    },
    // 添加地址
    addDialog() {
      this.form = {
        // 收货人
        receiver: "",
        // 联系方式
        contact: "",
        // 所在省份编码
        provinceCode: "",
        // 所在城市编码
        cityCode: "",
        // 所在区/县编码
        countyCode: "",
        // 	详细地址
        address: "",
        // 邮政编码	邮政编码
        postalCode: "",
        // 地址标签，号分隔
        addressTags: "",
        // 	是否为默认，0为是，1为否
        isDefault: 0,
        //	完整行政区
        fullLocation: "",
      };
      this.dialogConfig = {
        type: "add",
        show: true,
        title: "添加收货地址",
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.list {
  border: 1px solid #f5f5f5;
  margin-bottom: 10px;
  cursor: pointer;
  &:hover {
    border-color: #27ba9b;
    background: #e6faf6;
  }
}
.active {
  border-color: #27ba9b;
  background: #e6faf6;
}
.checkout-address {
  background-color: white;
  border: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;
    .none {
      line-height: 90px;
      color: #999;
      text-align: center;
      width: 100%;
    }
    > ul {
      flex: 1;
      padding: 20px;
      li {
        line-height: 30px;
        span {
          color: #999;
          margin-right: 5px;
          > i {
            width: 0.5em;
            display: inline-block;
          }
        }
      }
    }
    > a {
      color: #27bb9a;
      width: 160px;
      text-align: center;
      height: 90px;
      line-height: 90px;
      border-right: 1px solid #f5f5f5;
    }
  }
  .action {
    width: 420px;
    text-align: center;
    .btn {
      width: 140px;
      height: 46px;
      line-height: 44px;
      font-size: 14px;
      outline: none;
      background: #fff;
      text-align: center;
      border: 1px solid gray;
      border-radius: 4px;
      cursor: pointer;
      &:first-child {
        margin-right: 10px;
      }
    }
  }
}
// 修改收货地址样式
.xtx-form {
  input {
    outline: none;
    border: 1px solid #e4e4e4;
    width: 320px;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    &::placeholder {
      color: #ccc;
    }
  }
  padding: 20px 40px;
}
.xtx-form-item {
  display: flex;
  align-items: center;
  width: 700px;
  margin: 0 auto;
  padding-bottom: 25px;
}
.xtx-city {
  width: 320px;
  :deep(.select) {
    height: 50px;
    line-height: 48px;
    display: flex;
    padding: 0 10px;
    justify-content: space-between;
    .placeholder {
      color: #ccc;
    }
    i {
      color: #ccc;
      font-size: 18px;
    }
    .value {
      font-size: 14px;
    }
  }
  :deep(.option) {
    top: 49px;
  }
}
</style>
